{% set uniqid = uniqid ?? uniqid('vhost_') %}
{% set idBase = "nginx-vhosts-#{uniqid}" %}
{% set nameBase = "nginx[vhosts][#{uniqid}]" %}

{% set server_aliases = (vhost.server_aliases is defined) ? vhost.server_aliases : [] %}
{% set ssl = (vhost.ssl is defined and vhost.ssl) ? true : false %}
{% set letsencrypt_email = (vhost.letsencrypt_email is defined) ? vhost.letsencrypt_email : '' %}
{% set ssl_cert = (vhost.ssl_cert is defined) ? vhost.ssl_cert : '' %}
{% set ssl_key = (vhost.ssl_key is defined) ? vhost.ssl_key : '' %}
{% set ssl_port = (vhost.ssl_port is defined) ? vhost.ssl_port : '' %}
{% set ssl_protocols = (vhost.ssl_protocols is defined) ? vhost.ssl_protocols : '' %}
{% set ssl_ciphers = (vhost.ssl_ciphers is defined) ? vhost.ssl_ciphers : '' %}
{% set ssl_letsencrypt_enabled = (ssl and ssl_cert == 'LETSENCRYPT') ? true : false %}
{% set ssl_custom_enabled = (ssl and ssl_cert != 'LETSENCRYPT') ? true : false %}
{% set rewrite_to_https = (vhost.rewrite_to_https is defined) ? true : false %}
{% set spdy = (vhost.spdy is defined) ? true : false %}
{% set rewrites = (vhost.rewrites is defined) ? vhost.rewrites : [] %}
{% set locations = (vhost.locations is defined) ? vhost.locations : [] %}
{% set client_max_body_size = (vhost.client_max_body_size is defined) ? vhost.client_max_body_size : '1m' %}

<div id="{{ idBase }}" data-uniqid="{{ uniqid }}" data-name="{{ nameBase }}"
     class="tab-pane {{ active is defined and active ? 'active' }}">
    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-server_name">
            Server Name
        </label>
        <input type="text" id="{{ idBase }}-server_name"
               name="{{ nameBase }}[server_name]"
               placeholder="awesome.test" class="form-control"
               value="{{ vhost.server_name }}" />
        <div class="help-block">
            Don't forget to update your computer's hosts file!
        </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-server_aliases">
            Server Aliases
        </label>
        <select id="{{ idBase }}-server_aliases"
               name="{{ nameBase }}[server_aliases][]"
               multiple class="form-control select-tags-editable">
            {% for alias in server_aliases %}
                <option selected value="{{ alias }}">{{ alias }}</option>
            {% endfor %}
        </select>
        <div class="help-block">
            Separated by comma.
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-www_root">
            Project Root
        </label>
        <input type="text" id="{{ idBase }}-www_root"
               name="{{ nameBase }}[www_root]"
               placeholder="/var/www/awesome" class="form-control"
               value="{{ vhost.www_root }}" />
        <div class="help-block">
            Root directory of your web project. Can be different
            from each vhost's root directory.
            <span class="label label-info" data-toggle="help-text">
                <i class="fa fa-ellipsis-h"></i></span>
            <div class="hidden">
                For example, if creating a Symfony 2 project, your
                vhost root would be <code>/var/www/awesome</code>
                and your location root would be
                <code>/var/www/awesome/web</code>. You may also point to the
                directory of the <code>index.php</code> or other landing
                page for all vhost locations.
            </div>
        </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-listen_port">
            Port
        </label>
        <input type="number" id="{{ idBase }}-listen_port"
               name="{{ nameBase }}[listen_port]"
               placeholder="80" class="form-control"
               value="{{ vhost.listen_port }}" />
        <div class="help-block">
            <code>80</code> for normal browsing, if you choose another append
            it to the URL in your browser, eg: <code>http://awesome.test:1337</code>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-client-max-body-size">
            Client Max Body Size
        </label>
        <input type="text" id="{{ idBase }}-client-max-body-size"
               name="{{ nameBase }}[client_max_body_size]"
               placeholder="1m" class="form-control"
               value="{{ client_max_body_size }}" />
        <div class="help-block">
            Value in megabytes (<code>1m</code> = 1 megabyte). <code>0</code> = disabled
        </div>
    </div>

    <div class="clearfix"></div>

    <input type="hidden" name="{{ nameBase }}[ssl]" value="0" />

    <div class="panel panel-info">
        <div class="panel-heading">SSL Options</div>
        <div class="panel-body">
            <ul class="nav nav-tabs nested-tabs sortable">
                <li class="{% if ssl_letsencrypt_enabled or not ssl %}active{% endif %}">
                    <a href="#" data-target="#{{ idBase }}-ssl-letsencrypt-container"
                       data-toggle="tab">Let's Encrypt SSL</a>
                </li>
                <li class="{% if ssl_custom_enabled %}active{% endif %}">
                    <a href="#" data-target="#{{ idBase }}-ssl-custom-container"
                       data-toggle="tab">Custom SSL</a>
                </li>
            </ul>

            <div class="tab-content">
                <div id="{{ idBase }}-ssl-letsencrypt-container"
                    class="tab-pane {% if ssl_letsencrypt_enabled or not ssl %}active{% endif %}">
                    <div class="checkbox checkbox-md no-padding mb-20">
                        <input type="checkbox" id="{{ idBase }}-ssl-letsencrypt-enabled"
                               name="{{ nameBase }}[ssl]" value="1"
                               {% if ssl_letsencrypt_enabled %}checked{% endif %}
                               data-toggle="checkbox-collapse"
                               data-target="#{{ idBase }}-ssl-letsencrypt-enabled-container"
                               data-enforce-group-single="{{ idBase }}-ssl"
                               data-enable-on-check data-disable-on-uncheck />
                        <label for="{{ idBase }}-ssl-letsencrypt-enabled">Use Let's Encrypt SSL</label>
                    </div>

                    <div class="clearfix"></div>

                    <div id="{{ idBase }}-ssl-letsencrypt-enabled-container"
                        class="collapse {% if ssl_letsencrypt_enabled %}in{% endif %}">
                        <div class="help-block">
                            <p>Let’s Encrypt is a new Certificate Authority:
                                It’s free, automated, and open.</p>

                            <p>Generates a valid SSL certificate. Automatically
                                renews the certificate once a month. It's awesome!</p>

                            <p><a href="https://letsencrypt.org/" target="_blank">More information</a></p>

                            <p><strong>This will only work on a public domain!</strong></p>

                            <p>Do not choose this option for local development domains.</p>

                            <p>THE DOMAIN MUST BE PUBLIC AND REACHABLE FROM THE INTERNET.</p>

                            <p>If you do not know your server's IP address ahead of time,
                                <code>$ vagrant up</code> may fail initially. You need to assign
                                your domain to the new server via an <code>A</code> record
                                or a floating IP address. As long as your domain resolves
                                to the created server this will work!</p>

                            <p>Simply run <code>$ vagrant provision</code> once the domain is
                                resolving properly!</p>

                            <p>Make sure to also add this domain to the
                                <a href="#letsencrypt" data-toggle="tab" data-group="menu-link">
                                    Let's Encrypt tab by clicking here</a>!</p>
                        </div>

                        <div class="form-group col-xs-12">
                            <div class="clearfix"><label>SSL-Only Options</label></div>

                            <div class="checkbox">
                                <input type="checkbox" id="{{ idBase }}-letsencrypt-rewrite_to_https"
                                       name="{{ nameBase }}[rewrite_to_https]"
                                       value="1"
                                       {% if rewrite_to_https %}checked{% endif %} />
                                <label for="{{ idBase }}-letsencrypt-rewrite_to_https">
                                    Rewrite to SSL
                                </label>
                                <div class="help-block">
                                    Forwards all non-SSL traffic to SSL vhost.
                                </div>
                            </div>

                            <div class="checkbox">
                                <input type="checkbox" id="{{ idBase }}-letsencrypt-spdy"
                                       name="{{ nameBase }}[spdy]"
                                       value="1"
                                       {% if spdy %}checked{% endif %} />
                                <label for="{{ idBase }}-letsencrypt-spdy">
                                    Enable Spdy Module
                                </label>
                                <div class="help-block">
                                    <a href="http://blog.cloudflare.com/introducing-spdy"
                                       target="_blank">Learn more about this</a>.
                                </div>
                            </div>
                        </div>

                        <input type="hidden" name="{{ nameBase }}[ssl_cert]"
                               value="LETSENCRYPT" />
                        <input type="hidden" name="{{ nameBase }}[ssl_key]"
                               value="LETSENCRYPT" />
                        <input type="hidden" name="{{ nameBase }}[ssl_port]"
                               value="443" />
                        <input type="hidden" name="{{ nameBase }}[ssl_protocols]"
                               value="{{ ssl_protocols }}" />
                        <input type="hidden" name="{{ nameBase }}[ssl_ciphers]"
                               value="{{ ssl_ciphers }}" />
                    </div>
                </div>
                <div id="{{ idBase }}-ssl-custom-container"
                    class="tab-pane {% if ssl_custom_enabled %}active{% endif %}">
                    <div class="checkbox checkbox-md no-padding mb-20">
                        <input type="checkbox" id="{{ idBase }}-ssl-custom-enabled"
                               name="{{ nameBase }}[ssl]" value="1"
                               {% if ssl_custom_enabled %}checked{% endif %}
                               data-toggle="checkbox-collapse"
                               data-target="#{{ idBase }}-ssl-custom-enabled-container"
                               data-enforce-group-single="{{ idBase }}-ssl"
                               data-enable-on-check data-disable-on-uncheck />
                        <label for="{{ idBase }}-ssl-custom-enabled">Use Custom SSL</label>
                    </div>

                    <div class="clearfix"></div>

                    <div id="{{ idBase }}-ssl-custom-enabled-container"
                        class="collapse {% if ssl_custom_enabled %}in{% endif %}">
                        <div class="form-group col-xs-12 col-sm-6">
                            <label for="{{ idBase }}-ssl_cert">
                                SSL Certificate File Path
                            </label>
                            <input type="text" id="{{ idBase }}-ssl_cert"
                                   name="{{ nameBase }}[ssl_cert]"
                                   placeholder="/leave/blank/for/sample" class="form-control"
                                   value="{{ ssl_cert }}" />
                            <div class="help-block">
                                <p>Absolute path to SSL Certificate File. Usually ends in .crt.
                                    Leave blank to use a generic one.
                                    <strong>DO NOT LEAVE BLANK FOR PRODUCTION</strong>.
                                    <span class="label label-info" data-toggle="help-text">
                                        <i class="fa fa-ellipsis-h"></i></span>
                                </p>
                                <div class="hidden">
                                    <p>This should be the location within the VM, not the host!</p>

                                    <p><a href="http://nginx.org/en/docs/http/configuring_https_servers.html"
                                       target="_blank">Learn more about this</a>.</p>
                                </div>
                            </div>
                        </div>

                        <div class="form-group col-xs-12 col-sm-6">
                            <label for="{{ idBase }}-ssl_key">
                                SSL Certificate Key File Path
                            </label>
                            <input type="text" id="{{ idBase }}-ssl_key"
                                   name="{{ nameBase }}[ssl_key]"
                                   placeholder="/leave/blank/for/sample" class="form-control"
                                   value="{{ ssl_key }}" />
                            <div class="help-block">
                                <p>Absolute path to SSL Certificate Key File. Usually ends in .key.
                                    Leave blank to use a generic one
                                    <strong>DO NOT LEAVE BLANK FOR PRODUCTION</strong>.
                                    <span class="label label-info" data-toggle="help-text">
                                        <i class="fa fa-ellipsis-h"></i></span>
                                </p>
                                <div class="hidden">
                                    <p>This should be the location within the VM, not the host!</p>

                                    <p><a href="http://nginx.org/en/docs/http/configuring_https_servers.html"
                                          target="_blank">Learn more about this</a>.</p>
                                </div>
                            </div>
                        </div>

                        <div class="clearfix"></div>

                        <div class="form-group col-xs-12 col-sm-6">
                            <label for="{{ idBase }}-ssl_port">
                                SSL Port
                            </label>
                            <input type="text" id="{{ idBase }}-ssl_port"
                                   name="{{ nameBase }}[ssl_port]"
                                   placeholder="443" class="form-control"
                                   value="{{ ssl_port }}" />
                            <div class="help-block">
                                Should be different from the normal non-SSL Port chosen above!
                            </div>
                        </div>

                        <div class="clearfix"></div>

                        <div class="form-group col-xs-12">
                            <div class="clearfix"><label>SSL-Only Options</label></div>

                            <div class="checkbox">
                                <input type="checkbox" id="{{ idBase }}-custom-rewrite_to_https"
                                       name="{{ nameBase }}[rewrite_to_https]"
                                       value="1"
                                       {% if rewrite_to_https %}checked{% endif %} />
                                <label for="{{ idBase }}-custom-rewrite_to_https">
                                    Rewrite to SSL
                                </label>
                                <div class="help-block">
                                    Forwards all non-SSL traffic to SSL vhost.
                                </div>
                            </div>

                            <div class="checkbox">
                                <input type="checkbox" id="{{ idBase }}-custom-spdy"
                                       name="{{ nameBase }}[spdy]"
                                       value="1"
                                       {% if spdy %}checked{% endif %} />
                                <label for="{{ idBase }}-custom-spdy">
                                    Enable Spdy Module
                                </label>
                                <div class="help-block">
                                    <a href="http://blog.cloudflare.com/introducing-spdy"
                                       target="_blank">Learn more about this</a>.
                                </div>
                            </div>
                        </div>

                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>

            <div class="clearfix"></div>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="panel panel-info">
        <div class="panel-heading">Virtual Host Rewrites</div>
        <div class="panel-body">
            <ul class="nav nav-tabs nested-tabs sortable">
                <li class="add">
                    <a href="{{ path('puphpet.nginx.vhost_rewrite', {'vhostId': uniqid}) }}"
                       data-toggle="add-block">
                        <i class="fa fa-plus"></i> Add</a>
                </li>
                {% for index, rewrite in rewrites %}
                    {% set blockId = "#{idBase}-rewrites-#{index}" %}
                    {% set blockName = "#{nameBase}[rewrites][#{index}]" %}
                    <li class="{{ loop.first ? 'active' }}">
                        <a href="#" data-target="#{{ blockId }}"
                           data-toggle="tab">{{ index }}</a>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default"
                                    data-toggle="delete-block"
                                    data-target="#{{ blockId }}">
                                <i class="fa fa-close"></i></button>
                        </div>
                        <input type="hidden" name="{{ blockName }}" value="1" />
                    </li>
                {% endfor %}
            </ul>

            <div class="tab-content">
                <div class="empty-tabs">
                    <i class="fa fa-share fa-rotate-270" aria-hidden="true"></i>
                    Click to add a virtual host rewrite
                </div>
                {% for index, rewrite in rewrites %}
                    {% include 'PuphpetBundle:nginx:vhost_rewrite.html.twig' with {
                        'vhostId': uniqid,
                        'rewrite': rewrite,
                        'uniqid': index,
                        'active': loop.first ? true : false,
                    } %}
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="panel panel-info">
        <div class="panel-heading">Virtual Host Location</div>
        <div class="panel-body">
            <ul class="nav nav-tabs nested-tabs sortable dropdown">
                <li class="add">
                    <a href="#" data-toggle="dropdown" id="{{ idBase }}-dropDownMenu">
                        Add <span class="caret"></span></a>

                    <ul class="dropdown-menu" aria-labelledby="{{ idBase }}-dropDownMenu">
                        <li><a href="{{ path('puphpet.nginx.location', {
                                    'vhostId': uniqid,
                                    'pregenerated': 'html',
                                }) }}"
                               data-toggle="add-block">Basic HTML</a></li>
                        <li><a href="{{ path('puphpet.nginx.location', {
                                    'vhostId': uniqid,
                                    'pregenerated': 'php',
                                }) }}"
                               data-toggle="add-block">Basic PHP</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="{{ path('puphpet.nginx.location', {
                                    'vhostId': uniqid,
                                    'pregenerated': 'symfony2_3',
                                }) }}"
                               data-toggle="add-block">Symfony 2 & 3</a></li>
                        <li><a href="{{ path('puphpet.nginx.location', {
                                    'vhostId': uniqid,
                                    'pregenerated': 'symfony4',
                                }) }}"
                               data-toggle="add-block">Symfony 4</a></li>
                        <li><a href="{{ path('puphpet.nginx.location', {
                                    'vhostId': uniqid,
                                    'pregenerated': 'laravel',
                                }) }}"
                               data-toggle="add-block">Laravel</a></li>
                        <li><a href="{{ path('puphpet.nginx.location', {
                                    'vhostId': uniqid,
                                    'pregenerated': 'wordpress',
                                }) }}"
                               data-toggle="add-block">Wordpress</a></li>
                    </ul>
                </li>
                {% for index, location in locations %}
                    {% set blockId = "#{idBase}-locations-#{index}" %}
                    {% set blockName = "#{nameBase}[locations][#{index}]" %}
                    <li class="{{ loop.first ? 'active' }}">
                        <a href="#" data-target="#{{ blockId }}"
                           data-toggle="tab">{{ index }}</a>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default"
                                    data-toggle="delete-block"
                                    data-target="#{{ blockId }}">
                                <i class="fa fa-close"></i></button>
                        </div>
                        <input type="hidden" name="{{ blockName }}" value="1" />
                    </li>
                {% endfor %}
            </ul>

            <div class="tab-content">
                <div class="empty-tabs">
                    <i class="fa fa-share fa-rotate-270" aria-hidden="true"></i>
                    Click to add a virtual host location
                </div>
                {% for index, location in locations %}
                    {% include 'PuphpetBundle:nginx:location.html.twig' with {
                        'vhostId': uniqid,
                        'location': location,
                        'uniqid': index,
                        'active': loop.first ? true : false,
                    } %}
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="clearfix"></div>
</div>
